<!DOCTYPE html> 
<html>
    <head>
	<title>my HTML5</title>
	<link href="layout.css" rel="stylesheet" type="text/css" media="all" />	
	<script src="graph2D.js" type="text/javascript"></script>
    </head>
    <body>
		<label>What's your email address?</label>
		<br />
		<input name="email" type="text"/>
		<br /><br />
		<label>What's your password?</label>
		<br />
		<canvas class ="canvas" id="myCanvas" width="240" height="240"></canvas>
		<br /><br />
		<input id="signInBtn" type="button" value="Sign In"/>
		<input id="reenterBtn" type="button" value="Reenter"/>
		<input id="resetBtn" type="button" value="Reset"/>
    </body>
</html>

<script type="text/javascript">
	var testedPassword = 'tkrTda_';
	var graphCode = new GraphCode('myCanvas');
	var passwordGroup = new PasswordGroup();
	var users = new Users();
	
	$('reenterBtn').addEventListener('click', reEnter, false);
	$('resetBtn').addEventListener('click', reset, false);
	$('signInBtn').addEventListener('click', logon, false);
	
	function reEnter() {
		graphCode.clear();
	}
	
	function logon() {
		var user = users.getUser($('email').value);
		if (user == null) {
			warn('Invalid email address');
			return;
		}
		
		var indexes = graphCode.getPassword();
		var password = passwordGroup.getDecodedPassword(indexes, user.getGroupId());
		if (password != null && password == user.getPassword()) {
			warn('User logs on!');
		} else {
			warn('Wrong email or password!');
		}
	}
	
	function reset() {
		var user = users.getUser($('email').value);
		if (user == null) {
			warn('Invalid email address');
			return;
		}
		
		var indexes = graphCode.getPassword();
		var password = passwordGroup.getDecodedPassword(indexes, user.getGroupId());
		if (password == null) {
			warn('Failed to reset password!');
			return;
		}
		user.setPassword(password);
		warn('Password reset!');
	}
</script>